<!-- goodsContent 商品内容 -->
<template>
  <view class="goodsContent">
    <view class="price-box flex flex-b flex-m">
      <view class="flex flex-bottom">
        <price :price="info.sellPrice" unit-size="24" price-size="40" custom-class="mr10" color="#FFB415"></price>
        <view v-if="info.costPrice != 0 && Number(info.sellPrice) > Number(info.costPrice)">
          <price :price="info.costPrice" unit-size="24" price-size="24" del color="#888888"></price>
        </view>
      </view>
    </view>
    <view v-if="hasCommision" class="has-commisision flex flex-m mb15" @click="onShare">
      <view class="flex-1 flex flex-m fs22">
        <img :src="commisionIcon" class="commision-icon mr10" />
        <text class="fs22">自购省￥{{ info.commission }} 分享赚￥{{ info.commission }}</text>
      </view>
      <u-icon name="arrow-right" size="12" color="#FFB415" class="dib" />
    </view>
    <view class="title">
      {{ info.name }}
    </view>
    <view class="desc mb20 fs24">
      <!--用户券包里的立减券可用的显示立减icon-->
      <!-- #ifndef MP-ALIPAY -->
      <yy-tag v-if="info.canReduce" custom-class="mr10" color="#FFB415"> 立减券 </yy-tag>
      <!-- #endif -->
      <yy-tag v-for="(item, index) in info.label" :key="index" custom-class="mr10" :color="item.color">
        {{ item.labelName }}
      </yy-tag>
      <text class="desc_text"> {{ info.description }}</text>
    </view>
    <view class="tip-box flex flex-w">
      <view class="flex flex-m mr30">
        <yy-icon name="warning-o" size="28rpx" color="#FFB415"></yy-icon>
        <text class="ml5 fs22 fc6 line-0">不支持退款</text>
      </view>
      <view class="flex flex-m">
        <yy-icon name="warning-o" size="28rpx" color="#FFB415"></yy-icon>
        <text class="ml5 fs22 fc6 line-0">{{ info.purchaseQuantity | purchaseQuantity }}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import Price from '@/components/Price'
  import { COMMISION_ICON } from '@/model/imgConst'
  import { mapGetters } from 'vuex'
  export default {
    name: 'goods-content',
    components: { Price },

    props: {
      info: Object
    },
    computed: {
      ...mapGetters(['memberLevel']),
      hasCommision() {
        //组长 团长并且设置了佣金
        return +this.memberLevel && this.info.openDistribution === '1'
      }
    },
    data() {
      return {
        commisionIcon: COMMISION_ICON
      }
    },
    methods: {
      // 初始化方法
      onShare() {
        this.$emit('share')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .goodsContent {
    padding: 30rpx 30rpx 0;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    .has-commisision {
      .commision-icon {
        width: 30rpx;
        height: 30rpx;
      }
      color: $yellow;
      font-size: 22rpx;
      padding: 15rpx;
      background: #fffbe3;
      border-radius: 8rpx;
    }
    .title {
      font-size: 30rpx;
      color: $black;
    }
    .desc {
      color: $gray;
      margin-top: 7rpx;
      width: 100%;
      line-height: 28rpx;
      &_text {
        vertical-align: middle;
        line-height: 28rpx;
      }
    }

    .price-box {
      font-size: 24rpx;
      padding-bottom: 14rpx;
      color: $yellow;
      .price {
        font-size: 40rpx;
      }
    }

    .tip-box {
      padding: 20rpx 0;
      border-top: 1px solid #eee;
    }
  }
</style>
